<template>
    <div>
        <el-form ref="form" class="form" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="content"></el-input>
            </el-form-item>
            <el-button @click="loadArticlePage(1)">搜索</el-button>
        </el-form>
        <el-table
                :data="articles"
                style="width: 100%">
            <el-table-column
                    label="ID"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="标题"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="内容"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="图片"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.pic" style="width: 30px;height: 30px">
                </template>
            </el-table-column>
            <el-table-column
                    label="时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editArticle(scope.row)">更新</el-button>
                    <el-button size="mini" @click="deleteArticle(scope.row.id)">删除</el-button>
                    <el-button size="mini" @click="showArticle(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="loadArticlePage"
                :page-size="size"
                :total="total">
        </el-pagination>

        <el-dialog title="评论" :visible.sync="dialogTableVisible">
            <el-table :data="article.comments" v-if="article != null">
                <el-table-column property="time" label="日期" width="150"></el-table-column>
                <el-table-column property="content" label="内容" width="200"></el-table-column>
            </el-table>
        </el-dialog>

        <el-button @click="dialogArticleVisible = true">添加</el-button>
        <el-dialog title="文章" :visible.sync="dialogArticleVisible">
            <el-form :model="article">
                <el-form-item label="标题" >
                    <el-input v-model="article.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" >
                    <el-input v-model="article.content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="时间" >
                    <el-input v-model="article.time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" >
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="article.pic" :src="article.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-button @click="saveArticle">确认</el-button>
            <el-button @click="dialogArticleVisible = false">取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ArticleView",
        data(){
            return {
                //文章列表
                articles:[],
                current:1,
                size:2,
                title:"",
                content:"",
                total:0,
                //当前的文章
                article:{
                    id:0,
                    title:"",
                    content:"",
                    pic:"",
                    time:""
                },
                dialogTableVisible: false,
                dialogArticleVisible: false, //控制文章对话框显示
            }
        },
        methods:{
            //加载文章
            loadArticlePage(current){
                this.current = current;
                this.axios.get("article-page?current=" + this.current + "&size=" + this.size +
                    "&title=" + this.title + "&content=" + this.content)
                    .then(result => {
                       if(result.data.code == 200){
                           this.articles = result.data.data.records;
                           this.total = result.data.data.total;
                       }
                    });
            },
            saveArticle(){
                if(this.article.id == 0){
                    this.axios.post("article",this.article)
                        .then(result => {
                            if(result.data.code == 200){
                                this.loadArticlePage(this.current);
                            }
                        });
                }else{
                    this.axios.put("article",this.article)
                        .then(result => {
                            if(result.data.code == 200){
                                this.loadArticlePage(this.current);
                            }
                        });
                }
                this.article = {
                    id:0,
                    title:"",
                    content:"",
                    pic:"",
                    time:""
                };
                this.dialogArticleVisible = false;
            },
            //显示文章详情
            editArticle(article){
                this.article = JSON.parse(JSON.stringify(article));
                this.dialogArticleVisible = true;
            },
            //显示文章详情
            showArticle(article){
                this.article = JSON.parse(JSON.stringify(article));
                this.dialogTableVisible = true;
            },
            deleteArticle(id){
                this.axios.delete("article/"+id)
                    .then(result => {
                        if(result.data.code == 200){
                            this.loadArticlePage(this.current)
                        }
                    })
            },
            //上传成功回调
            handleAvatarSuccess(res, file) {
                console.log(res.data);
                this.article.pic = res.data;
            }
        },
        mounted() {
            this.loadArticlePage(1);
        }
    }
</script>

<style scoped>
    .form{
        width: 300px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
